<template>
  <div class="singer-detail">
      <MusicList :songs='songs' :pic='pic' :title="title"></MusicList>
  </div>
</template>
<script>
import { getSingerDetail } from '@/service/singer'
import { processSongs } from '@/service/song'
import MusicList from '@/components/music-list/music-list'
import { SINGER_KEY } from '@/js/constant'
import storage from 'good-storage'
export default {
  name: 'SingerDetail',
  components: {
    MusicList
  },
  props: {
    singer: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      songs: []
    }
  },
  computed: {
    computedSinger () {
      let ret = null
      const singer = this.singer
      if (singer) {
        ret = singer
      } else {
        const cachedSinger = storage.get(SINGER_KEY)
        // console.log(cachedSinger)
        if (cachedSinger && cachedSinger.mid === this.$route.params.id) {
          ret = cachedSinger
        }
      }
      return ret
    },
    pic () {
      const singer = this.computedSinger
      return singer && singer.pic
    },
    title () {
      const singer = this.computedSinger
      return singer && singer.name
    }
  },
  async created () {
    // 如果用户自行修改了ulr的id，导致computedSinger为null，则返回上级
    if (!this.computedSinger) {
      const path = this.$route.matched[0].path
      this.$router.push({ path })
    } else {
      const singer = this.computedSinger
      const result = await getSingerDetail(singer)
      this.songs = await processSongs(result.songs)
    }
  }
}
</script>
<style lang="scss" scoped>
.singer-detail {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: $color-background;
  }
</style>
